<template>
	<a-modal :width="500" :visible="visible" :title="params.name" @ok="handleOk" @cancel="handleClose" centered>
		<!-- 场景音量调整 -->
		<div class="form_con" v-if="params.name == '音量调整' && params.parent_type == 'sence'">
			<div class="form_item">
				<div class="form_title">场景音频</div>
				<a-col :span="12" style="margin-left: 20px">
					<a-slider :min="0" :max="100" v-model:value="operateForm.scene_volume" />
				</a-col>
				<a-input-number :min="0" :max="100" style="width: 120px; margin-left: 20px"
					v-model:value="operateForm.scene_volume" />
			</div>
		
			<div class="form_item"  style="min-width: 300px;">
				<div class="form_title">视频原声</div>
				<a-col :span="12" style="margin-left: 20px">
					<a-slider :min="0" :max="100" v-model:value="operateForm.video_volume" />
				</a-col>
				<a-input-number :min="0" :max="100" style="width: 120px; margin-left: 20px"
					v-model:value="operateForm.video_volume" />
			</div>
		</div>
		<!-- 素材音量调整 -->
		<!-- <div class="form_con" v-if="params.name == '音量调整' && params.parent_type == 'material'">
			<div class="form_item" >
				<div class="form_title">视频原声</div> -->
				<!-- <a-col :span="12" style="margin-left: 20px"> -->
					<!-- <div style="min-width: 230px;">
						<a-slider :min="0" :max="100" v-model:value="operateForm.video_volume" />
					</div> -->
				<!-- </a-col> -->
					<!-- <a-input-number size="small" :min="0" :max="100" style="min-width: 100px; border-radius: 6px; margin-left: 20px;"
						v-model:value="operateForm.video_volume" />
			</div>
		</div> -->
		<!-- 口播音量调整 -->
		<!-- <div class="form_con" v-if="params.name == '音量调整' && params.parent_type == 'broad'">
			<div class="form_item">
				<div class="form_title">全程解说</div>
				<a-col :span="12" style="margin-left: 20px">
					<a-slider :min="0" :max="100" v-model:value="operateForm.audio_volume" />
				</a-col>
				<a-input-number :min="0" :max="100" style="width: 120px; margin-left: 20px"
					v-model:value="operateForm.audio_volume" />
			</div>
		</div> -->
		<!-- 音乐音量调整 -->
		<!-- <div class="form_con" v-if="params.name == '音量调整' && params.parent_type == 'music'">
			<div class="form_item">
				<div class="form_title">背景音乐</div>
				<a-col :span="12" style="margin-left: 20px">
					<a-slider :min="0" :max="100" v-model:value="operateForm.bgm_volume" />
				</a-col>
				<a-input-number :min="0" :max="100" style="width: 120px; margin-left: 20px"
					v-model:value="operateForm.bgm_volume" />
			</div>
		</div> -->
		<!-- 素材颜色调整 -->
		<div class="form_con" v-if="params.name == '颜色调整' && (params.parent_type == 'material' || params.parent_type == 'sence')">
			<div class="form_item">
				<div class="form_title">对比度</div>
				<a-col :span="12" style="margin-left: 20px">
					<a-slider :min="-100" :max="100" v-model:value="color.contrast" />
				</a-col>
				<a-input-number :min="-100" :max="100" style="width: 120px; margin-left: 20px"
					v-model:value="color.contrast" />
			</div>

			<div class="form_item">
				<div class="form_title">饱和度</div>
				<a-col :span="12" style="margin-left: 20px">
					<a-slider :min="-100" :max="100" v-model:value="color.saturation" />
				</a-col>
				<a-input-number :min="-100" :max="100" style="width: 120px; margin-left: 20px"
					v-model:value="color.saturation" />
			</div>
			<div class="form_item">
				<div class="form_title">亮度</div>
				<a-col :span="12" style="margin-left: 20px">
					<a-slider :min="-100" :max="100" v-model:value="color.brightness" />
				</a-col>
				<a-input-number :min="-100" :max="100" style="width: 120px; margin-left: 20px"
					v-model:value="color.brightness" />
			</div>

			<div class="form_item">
				<div class="form_title">色调</div>
				<a-col :span="12" style="margin-left: 20px">
					<a-slider :min="-100" :max="100" v-model:value="color.tint" />
				</a-col>
				<a-input-number :min="-100" :max="100" style="width: 120px; margin-left: 20px"
					v-model:value="color.tint" />
			</div>
			<div class="form_item">
				<div class="form_title">色温强度</div>
				<a-col :span="12" style="margin-left: 20px">
					<a-slider :min="0" :max="100" v-model:value="color.temperature_ratio" />
				</a-col>
				<a-input-number :min="0" :max="100" style="width: 120px; margin-left: 20px"
					v-model:value="color.temperature_ratio" />
			</div>

			<div class="form_item">
				<div class="form_title">色温</div>
				<a-col :span="12" style="margin-left: 20px">
					<a-slider :min="1000" :max="40000" v-model:value="color.kelvin_temperature" />
				</a-col>
				<a-input-number :min="1000" :max="40000" style="width: 120px; margin-left: 20px"
					v-model:value="color.kelvin_temperature" />
			</div>
		</div>
		<!-- 音乐随机音乐 -->
		<div class="form_con" v-if="params.name == '随机音乐' && params.parent_type == 'music'">
			<div class="form_item">
				<div class="form_title">是否随机</div>
				<a-switch style="margin-left: 10px" checkedValue="random" unCheckedValue="custom"
					v-model:checked="operateForm.random" />
			</div>
		</div>
		
		<!-- 模板随机模板 -->
		<div class="form_con" v-if="params.name == '随机模板' && params.parent_type == 'template'">
			<div class="form_item">
				<div class="form_title">是否随机</div>
				<a-switch style="margin-left: 10px" checkedValue="random" unCheckedValue="custom"
					v-model:checked="operateForm.random" />
			</div>
		</div>
		
		<!-- 模板 音量调整 -->
		<div class="form_con" v-if="params.name == '音量调整' && params.parent_type == 'template'">
			<div class="form_item">
				<div class="form_title">背景音乐</div>
				<a-col :span="12" style="margin-left: 20px">
					<a-slider :min="0" :max="100" v-model:value="operateForm.bgm_volume" />
				</a-col>
				<a-input-number :min="0" :max="100" style="width: 120px; margin-left: 20px"
					v-model:value="operateForm.bgm_volume" />
			</div>
		</div>
		<!-- 模板筛选 -->
		<div class="form_con" v-if="params.name == '筛选' && params.parent_type == 'template'">
			<div class="duration_con">
				时长：
				<a-tag @click="durationKey = index" style="cursor: pointer;" :color="index == durationKey?'#cd201f':'default'" v-for="(item, index) in durationList" :key="index">{{item}}</a-tag>
			</div>
			<div class="label_con" style="margin-top: 10px;" v-if="labelList?.length">
				标签：
				<a-tag @click="labelKey = index" style="cursor: pointer;" :color="index == labelKey?'#cd201f':'default'" v-for="(item, index) in labelList" :key="index">{{item}}</a-tag>
			</div>
		</div>
	</a-modal>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		computed,
		watch,
		toRaw,
		createVNode,
		ref,
		nextTick,
	} from "vue";
	import {
		FolderAddOutlined,
		MinusOutlined,
		PlusOutlined,
	} from "@ant-design/icons-vue";
	import store from "../../../../../../store";
	import request from "../../../../../../common/utils/request";
	export default defineComponent({
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			params: {
				type: Object,
				default: () => {
					return {};
				},
			},
		},

		components: {},

		setup(props, context) {
			const state = reactive({
				durationKey: 0,
				labelKey: 0,
				operateForm: {
					scene_volume: 100,
					video_volume: 50,
					bgm_volume: 50,
					audio_volume: 100,
					random: "custom",
				},
				// 颜色
				color: {
					contrast: 0,
					saturation: 0,
					brightness: 0,
					tint: 0,
					temperature_ratio: 0,
					kelvin_temperature: 6000,
				},
				
				//模板筛选
				durationList: [
					'全部',
					'10秒以内',
					'10~15秒',
					'15秒以上'],
				labelList: []
			});

			const handleOk = () => {
				const {
					params: {
						name,
						type,
						parent_type
					},
				} = props;
				// 场景
				if (name === "音量调整" && parent_type == 'sence') {
					store.dispatch("SetClipJSONVolume", {
						scene_volume: state.operateForm['scene_volume'],
						video_volume: state.operateForm['video_volume'],
					});
				}
				// 音乐
				if (name === "音量调整" && parent_type == 'music') {
					store.dispatch("SetClipJSONVolume", {
						bgm_volume: state.operateForm['bgm_volume']
					});
				}
				// 模板
				if (name === "音量调整" && parent_type == 'template') {
					store.dispatch("SetClipJSONVolume", {
						bgm_volume: state.operateForm['bgm_volume']
					});
				}
				// 模板 随机
				if (name === "随机模板" && parent_type == 'template') {
					store.dispatch("SetClipInfo", {
						use_random_template: state.operateForm['random'] == 'random'?true:false
					});
				}
				// 素材
				if (name === "音量调整" && parent_type == 'material') {
					store.dispatch("SetClipJSONVolume", {
						video_volume: state.operateForm['video_volume']
					});
				}
				// 口播
				if (name === "音量调整" && parent_type == 'broad') {
					store.dispatch("SetClipJSONVolume", {
						audio_volume: state.operateForm.audio_volume,
					});
				}
				// 素材
				if (name === "颜色调整" && (parent_type == 'material' || parent_type == 'sence')) {
					store.dispatch("SetClipJSONColor", {
						...state.color,
					});
				}
				// 音乐
				if (name === "随机音乐" && parent_type == 'music') {
					const obj = {
						bgm_mode: state.operateForm.random,
					};
					if (state.operateForm.random === "random") {
						Object.assign(obj, {
							bgm: [],
						});
					} else {
						Object.assign(obj, {
							bgm_scenes: [],
						});
					}
					store.dispatch("SetClipInfo", {
						...obj,
					});
				}
				// 模板 筛选
				if (name === "筛选" && parent_type == 'template') {
					let obj = {
						durationKey: state.durationKey,
						labelKey: state.labelKey,
						duration: state.durationList[state.durationKey],
						label: state.labelList[state.labelKey]
					}
					store.dispatch('SetSelectTemplate', {
						...obj
					})
				}
				context.emit("close");
			};

			const handleClose = () => {
				context.emit("close");
			};

			watch(
				() => props.visible,
				(val) => {
					const {
						params: {
							name,
							type,
							parent_type,
						},
					} = props;
					
					if (val) {
						if(name == '筛选' && parent_type == 'template'){
							getTagList()
						}
						if (name === "音量调整" && parent_type == 'material') {
							state.operateForm['scene_volume'] = store.getters.clipJSON.volume['scene_volume']
						}
						if (name === "音量调整" && parent_type == 'sence') {
							state.operateForm['scene_volume'] = store.getters.clipJSON.volume['scene_volume']
							state.operateForm['video_volume'] = store.getters.clipJSON.volume['video_volume']
						}
						if (name === "音量调整" && parent_type == 'template') {
							state.operateForm['bgm_volume'] = store.getters.clipJSON.volume['bgm_volume']
						}
						if (name === "随机模板" && parent_type == 'template') {
							state.operateForm['random'] = store.getters.clipJSON.use_random_template?'random':'custom'
						}
						if (name === "颜色调整") {
							state.color = store.getters.clipJSON.effect_filter.color;
						}
						if (props?.params?.name === "随机音乐") {
							state.operateForm.random = store.getters.clipJSON.bgm_mode;
						}
					}
				}
			);
			
			const getTagList = () => {
				request.get('/work_ai', '/user/shotstack/clip/videoTemplate/taglist').then(res=> {
					state.labelList = res.lists
					state.labelList.unshift('全部')
				})
			}

			return {
				...toRefs(state),
				handleOk,
				handleClose,
			};
		},
	});
</script>

<style lang="less" scoped>
	.form_con {
		color: #8d8d91;
		
		.form_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
			margin-top: 10px;
			.form_title {
				// width: 170px;
				white-space: nowrap;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}
	}
</style>